<template>
  <div id="app">
          <!-- 头部栏 -->
      
<Head></Head>
    <!-- 大容器 -->
    <el-container style="height: 800px">



      <!-- 侧边栏 -->
      <el-aside style="width: 200px; background-color: red">
        <!--:default-openeds="['1', '3']"  设置那些导航是展开状态 -->
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <!-- slot插槽   el-icon-star-on图标元素 可以在官网更换-->
            <template slot="title"
              ><i class="el-icon-star-on"></i>导航一</template
            >
            <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="2">
            <!-- slot插槽   el-icon-star-on图标元素 可以在官网更换-->
            <template slot="title"
              ><i class="el-icon-star-on"></i>导航二</template
            >
            <el-menu-item-group>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header style="height: 150px; background-color: green"></el-header>
        <!-- 主体数据 -->
        <el-main style="height: 500px; background-color: blue">
          <!-- 在表格中绑定数据 -->
          <Main v-bind:users="users"></Main>
        </el-main>
        <!-- 尾部 -->
        <el-footer style="height: 100px; background-color: yellow"></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 导入子组件
import Main from "./components/main.vue";
// 导入头部组件
import Head from "./components/header.vue";

export default {
  name: "App",
  // 注册组件
  components: {
    Main,
    Head,
  },
  data() {
    // let users = new Array();
    // for (let i = 0; i < 20; i++) {
    //   users.push({
    //     id:i+1,
    //     date: "2016-05-02",
    //     name: "王小虎",
    //     address: "上海市普陀区金沙江路 1518 弄",
    //   });
    // }
    // return {
    //   // 返回数据
    //   users: users,
    // };
    //发送请求获取数据
    this.axios.get("http://localhost:8080/user/all").then((res) => {
      //then回调函数，作用与jquery中的success一样,res中封装了得到的数据
      console.log(res);
      //将得到的值赋值给属性
      this.users = res.data;
    });
    return {
      //返回数据  key-value
      users: null,
    };
  },
};
</script>

<style>
/* 解决白边 */
body {
  margin: 0px;
  padding: 0px;
}
</style>
